<template>
    <div>
        标题:<input type="text" v-model="infoc.bname" />
        类型:  <select v-model="infoc.lid">
                            <option value="">请选择</option>
                            <option value=1>服务业务</option>
                            <option value=2>咨询业务</option>
                        </select>
        <input type="button" value="显示" class="btn btn-success" @click="getList" />
        <input type="button" value="批量删除" class="btn btn-danger" @click="Getdel" />
        <input type="button" value="批量启用" class="btn btn-info" @click="Getstate(1)" />
        <input type="button" value="批量禁用" class="btn btn-success" @click="Getstate(0)" />
        <h3>公告管理</h3>
        <h1><input type="button" value="公告增加" class="btn btn-success" @click="ok" /></h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="getAll" /></td>
                    <td>标题</td>
                    <td>内容</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>类型</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in infoq.list":key="item.id" :value="item.id">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="getone" :key="item.id" /></td>
                    <td>{{item.bname }}</td>
                    <td>{{item.nei }}</td>
                    <td>
                        <img :src="item.phone" alt="" width="100" height="100">
                    </td>
                    <td>{{item.state==1?"显示":"隐藏" }}</td>
                    <td>{{item.lid==1?"服务业务":"" }}</td>
                    <td>
                        <input type="button" class="btn btn-success" value="删除" @click="del(item.id)"/>
                        <input type="button" class="btn btn-success" value="修改" @click="upd(item.id)"/>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            当前第{{ infoc.pageindex }}页/共{{ infoq.totacount }}条/共{{ infoq.totapage }}页
            <input type="button" value="首页" class="btn btn-success" @click="Fen(1)" />
            <input type="button" value="上一页" class="btn btn-success" @click="Fen(infoc.pageindex-1)" />
            <input type="button" value="下一页" class="btn btn-success" @click="Fen(infoc.pageindex+1)" />
            <input type="button" value="尾页" class="btn btn-success" @click="Fen(infoq.totapage)" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'

const route=useRoute();
const router=useRouter();

const ok=()=>{
    router.push('/NoteAdd');
}

//单选
let checked=ref(false);
let ids=ref([]);

const getAll=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=infoq.list.map((item:any)=>{
            return item.id;
        })
    }
    else{
        ids.value=[];
    }
}


const getone=()=>{
    if(ids.value.length==infoq.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}

//传数据
const infoc:any=reactive({
    pageindex:1,
    pagesize:3,
    shopname:'',
    lid:''

})
//取数据
const infoq:any=reactive({
    list:[],
    totacount:0,
    totapage:0
})

onMounted(()=>{
    getList();
})
//分页
const Fen=(num:any)=>{
    if(num<1){
        infoc.pageindex=1;
        return;
    }
    if(num>infoq.totapage){
        infoc.pageindex=infoq.totapage;
        return;
    }
    infoc.pageindex=num;
    getList();
}


//删除
const del=(id:any)=>{
    var d=confirm('确定要删除吗?');
    if(d){
        axios({
            url:'/api/Note/Del',
            method:'delete',
            params:{
                id:id,
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功!');
                getList();
            }
            else{
                alert('删除失败!');
            }
        })
    }
}

//批量删除
const Getdel=(id:any)=>{
    var d=confirm('确定要删除吗?');
    if(d){
        axios({
            url:'/api/Note/DelNo',
            method:'delete',
            params:{
                id:ids.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功!');
                getList();
            }
            else{
                alert('删除失败!');
            }
        })
    }
}

//批量修改状态
const Getstate=(state:any)=>{
        axios({
            url:'/api/Note/StateNo',
            method:'get',
            params:{
                id:ids.value.toString(),
                state:state,
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功!');
                getList();
            }
            else{
                alert('修改失败!');
            }
        })
}
//查询
const getList=()=>{
    axios({
        url:'/api/Note/NGetList',
        method:'get',
        params:infoc
    })
    .then(res=>{
        console.log(res);
        infoq.list=res.data.list;
        infoq.totacount=res.data.totacount;
        infoq.totapage=res.data.totapage;
    })
}

//修改
const upd=(xid:any)=>{
    router.push({
        path:'/NoteXiu',
        query:{
            id:xid
        }
    })
}



</script>